<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 15:04:38
 * @LastEditors: dh
 * @LastEditTime: 2023-08-08 14:53:02
-->
<style>
	/* border-radius (圆角) */
	div.radius {
		width: 200px;
		height: 200px;
		background: teal;
		border-radius: 50%;
		/* 一个角可以设置两个弧度，垂直/水平 */
		border-top-left-radius: 10px 10px;
		border-top-right-radius: 20px 20px;
		border-bottom-left-radius: 30px 30px;
		border-bottom-right-radius: 40px 40px;
		/* 简写形式，水平方向的 top-left top-right bootom-right bootom-left / 对应垂直方向的边角 */
		border-radius: 10px 20px 30px 40px / 10px 20px 30px 100px;
	}

	/* box-shadow (阴影) */
	div.shadow {
		width: 200px;
		height: 200px;
		margin-top: 50px;
		background-color: transparent;
		/*
        inset -- 写inset表示内阴影、不写inset就是外阴影、
        参数1：水平偏移量、1px
        参数2：垂直偏移量、2px
        参数3：阴影(高斯模糊)程度、3px  (基于边框两边的位置，同时向两侧展开模糊)
        参数4：水平竖直范围扩大 、0px
        */
		box-shadow: inset 1px 2px 3px 0px #000;
		/* 同时设置内外阴影， */
		box-shadow:
			1px 2px 3px 0px #f0f,
			inset 1px 2px 3px 0px #0ff;
		/* 或者独立设置多个值、 */
		box-shadow:
			inset 0px 0px 10px #fff,
			inset 3px 0px 10px #f0f,
			inset 0px -3px 10px #0ff,
			inset -3px 0px 10px #00f,
			inset 0px 3px 10px #ff0;
	}

	/* background 背景系列 */
	div.box123 {
		width: 300px;
		height: 300px;
		position: absolute;
		/* 水平剧中 */
		left: calc(50% - 250px);
		/* 垂直剧中 */
		top: calc(50% - 250px);
		background-color: red;
		/* 引入图片背景 （可以引入多个图片） */
		background-image: url('../assets/img/avatar.jpg'), url('../assets/img/avatar.jpg'), url('../assets/img/avatar.jpg');
		/* 分别设置两张图片的大小 */
		background-size:
			100px 100px,
			200px 200px;
		/* 不重复 */
		background-repeat: no-repeat;
		/* 分别设置位置 */
		background-position:
			top left,
			top center,
			top right;
		background-position:
			0 0,
			100px 0;
		background-image: radial-gradient(#fff, #000);
		/* 渐变颜色生成器 linear-gradient()、radial-gradient() */
		/*  */
		border: 20px solid transparent;
		padding: 20px;
		background-image: url('./img.png');
		/* 规定背景从盒子的某个部分 开始 渲染(padding-box、border-box、content-box、text) 默认值是padding-box */
		background-origin: content-box;
		/* 规定背景从盒子的某个部分 结束 渲染(padding-box、border-box、content-box、text) 默认值是border-box  text就是用文字体的内容区域来渲染 类似于彩色字体 */
		background-clip: content-box;
		/* background-repeat可以设置图片的排班方式、可以填两个参数、效果：是否重复、拉伸、间隙、补齐 */
		background-repeat: space round;
		/* background-position定位是基于background-origin的属性值 */
		background-position: 0px 0px;

		/* 超出部分滚动条展示 */
		overflow: scroll;
		/* background-attachment 设置相对于盒子的某个区域进行定位  */
		/* scroll（默认值） 背景图片随着页面的滚动而滚动(相对于容器定位) */
		/* local -- 相对于内容定位(滚动条位置改变时，背景图紧贴着文本内容) */
		/* fixed -- 可以使背景在浏览器窗口可视区，位置保持悬浮 */
		background-attachment: local;
		background-attachment: scroll, local, fixed;
		/* background-size
        设置背景图的大小 */
		/* contain -- 在不改变图片比例的情况下、让背景图跟容器刚好容纳(100%)。有一条边会朝内留空 */
		/* cover   -- 在不改变图片比例的情况下、让背景图跟容器刚好容纳(100%)。有一条边会朝外溢出(推荐) */
		/* 100%    -- 拉伸背景图跟容器大小一致、会改变图像比例 */
		background-size: cover;
		/* 渐变颜色生成器 linear-gradient()、radial-gradient() */
		/* 线性渐变 linear-gradient() */
		/* 参数1可空：需要渐变的方向、默认 to bottom  (向右下渐变：to right bottom )  */
		/* 参数1还可以写角度：如90deg、0deg、180deg、135deg */
		/* 参数2以后：渐变颜色color 20px是该颜色的起至位置 */
		background-color: linear-gradient(to left, #f40 20px, #626);
		/* 径向渐变 radial-gradient() */
		/* 参数1可空：设置渐变的圆及圆心点、(圆形 点在左上：circle at left top)
        closest-corner
        closest-side
        farthest-corner
        farthest-side */
		/* 参数2以后：渐变颜色color 20%是该颜色起至大小 */
		background-color: radial-gradient(ellipse at 5px 5px, #000 20%, #fff 40px, red);
	}
</style>

<div class="radius"></div>
<div class="shadow"></div>
<div class="box123"></div>
